<template>
  <vxe-modal
    v-model="dialogFormVisible"
    :title="title"
    show-footer
    transfer
    width="60%"
    destroy-on-close
    :loading="listLoading"
    @close="close"
  >
    <template #default>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="日志编号" min-width="120">
          {{ form.id }}
        </el-descriptions-item>
        <el-descriptions-item label="操作类型">
          <el-tag type="primary">{{ logType(form.logType) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="用户名称">
          {{ form.username }}
        </el-descriptions-item>
        <el-descriptions-item label="登录地址">
          {{ form.userIp }}
        </el-descriptions-item>
        <el-descriptions-item label="浏览器">
          {{ form.userAgent }}
        </el-descriptions-item>
        <el-descriptions-item label="登陆结果">
          <el-tag :type="form.result === 0 ? 'primary' : 'danger'">
            {{ logRet(form.result) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="登录日期">
          {{
            $XEUtils.toDateString(
              form.createTime,
              format || 'yyyy-MM-dd HH:mm:ss'
            )
          }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button type="danger" @click="close">取消</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  import { getDictType } from '@/api/system/dict/dict.data'

  export default defineComponent({
    name: 'PostEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const $XEUtils = inject('$XEUtils')
      const state = reactive({
        formRef: null,
        listLoading: false,
        subListLoading: false,
        form: {},
        title: '',
        dialogFormVisible: false,
        system_login_type: [],
        system_login_result: [],
      })

      const showEdit = async (row) => {
        dictType()
        logRetType()
        state.dialogFormVisible = true
        state.form = row
        state.listLoading = false
      }

      const dictType = () => {
        getDictType({ dictType: 'system_login_type' })
          .then((res) => {
            state.system_login_type = res.data
          })
          .catch((err) => {
            state.listLoading = false
          })
      }

      const logRetType = () => {
        getDictType({ dictType: 'system_login_result' })
          .then((res) => {
            state.system_login_result = res.data
          })
          .catch((err) => {
            state.listLoading = false
          })
      }

      const logType = (val) => {
        let type = ''
        state.system_login_type.forEach((item) => {
          if (`${val}` === item.value) {
            type = item.label
          }
        })
        return type
      }

      const logRet = (val) => {
        let type = ''
        state.system_login_result.forEach((item) => {
          if (`${val}` === item.value) {
            type = item.label
          }
        })
        return type
      }

      const close = () => {
        state.form = {}
        state.dialogFormVisible = false
        state.listLoading = false
        state.subListLoading = false
      }

      onMounted(() => {})
      return {
        ...toRefs(state),
        showEdit,
        close,
        dictType,
        logType,
        logRet,
        logRetType,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vab-tree-border {
    width: 100%;
    height: 250px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }

  .el-container {
    height: calc(100vh - 155px);
  }
</style>
